<template>
    <div class="mar-x-15 mar-b-80">
        <div v-for="(item, index) in data" :key="index" class="bg-white border-rad-10 mar-t-20 pad-20">
            <h4>{{ item.title }}</h4>
            
            <div class="flex align-center mar-t-10">
                <div
                    v-for="(j, h) in item.children"
                    :key="h"
                    class="text-center mar-r-40 cur-pointer"
                    @click="skipToPage(j)"
                >
                    <SvgIcons
                        :iconClass="j.icon"
                        :style="{
                            fontSize: j.iconSize + 'px',
                        }"
                    />
                    <span class="dis-block mar-t-5 font-14">{{ j.title }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import SvgIcons from "@/components/SvgIcons"
    import Utils from '@/utils/utils'

    export default {
        name: 'System',

        components: {
            SvgIcons,
        },

        data() {
            return {
                data: [
                    {
                        title: '基本配置',
                        icon: '',
                        iconSize: '',
                        path: '',
                        name: '',
                        fatherPath: '/system',
                        sort: 1,
                        children: [
                            { title: '菜单管理', icon: 'icon-shoucang', iconSize: 40, path: '/systemManage/menuManage', name: 'MenuManage', fatherPath: '/system', children: [], sort: 1 },
                            { title: '用户管理', icon: 'icon-shoucang', iconSize: 40, path: '/systemManage/userManage', name: 'UserManage', fatherPath: '/system', children: [], sort: 2 },
                            { title: '角色管理', icon: 'icon-shoucang', iconSize: 40, path: '/systemManage/roleManage', name: 'RoleManage', fatherPath: '/system', children: [], sort: 3 }
                        ]
                    }
                ],
            }
        },

        methods: {
            // 跳转到页面
            skipToPage(row) {
                if (!row.path) {
                    Utils.popUpMsg('warning', '页面不存在！', 1000)
                    return
                }
                
                this.$router.push(row.path)
                this.$store.commit('lib/setTagList', row)
            }
        },
    }
</script>